<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>Ext JS 6学习文档-第3章-基础组件 | LErry</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="基础组件 在本章中，你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点：  熟悉基本的组件 – 按钮，文本框，日期选择器等等  表单字段的校验  菜单和工具栏  设计一个表单  计算器程序– 本章的示例项目     本章的主要目的是创建一个表单设计和一个计算器示例项目。以下图分别展示了表单设计和计算器设计。 首先，你观察下列表单设计，你会发现">
<meta name="keywords" content="java,extjs,ext">
<meta property="og:type" content="article">
<meta property="og:title" content="Ext JS 6学习文档-第3章-基础组件">
<meta property="og:url" content="https://www.itchina.top/2018/04/20/Ext JS 6学习文档-第3章-基础组件/index.html">
<meta property="og:site_name" content="LErry">
<meta property="og:description" content="基础组件 在本章中，你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点：  熟悉基本的组件 – 按钮，文本框，日期选择器等等  表单字段的校验  菜单和工具栏  设计一个表单  计算器程序– 本章的示例项目     本章的主要目的是创建一个表单设计和一个计算器示例项目。以下图分别展示了表单设计和计算器设计。 首先，你观察下列表单设计，你会发现">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/124.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/125.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/126.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/127.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/128.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/129.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/130.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/131.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/132.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/133.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/134.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/1-5.png">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/136.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/137.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/138.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/125.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/139.jpg">
<meta property="og:image" content="https://img-blog.csdn.net/20170611153659679?watermark/2/text/aHR0cDovL2Jsb
2cuY3Nkbi5uZXQvbHN5MDkwMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/disso
lve/70/gravity/SouthEast">
<meta property="og:updated_time" content="2018-04-25T12:25:55.589Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Ext JS 6学习文档-第3章-基础组件">
<meta name="twitter:description" content="基础组件 在本章中，你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点：  熟悉基本的组件 – 按钮，文本框，日期选择器等等  表单字段的校验  菜单和工具栏  设计一个表单  计算器程序– 本章的示例项目     本章的主要目的是创建一个表单设计和一个计算器示例项目。以下图分别展示了表单设计和计算器设计。 首先，你观察下列表单设计，你会发现">
<meta name="twitter:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/124.jpg">
    

    
        <link rel="alternate" href="/atom.xml" title="LErry" type="application/atom+xml" />
    

    
        <link rel="icon" href="/css/images/shortcut_icon.png" />
    

    <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/libs/open-sans/styles.css">
    <link rel="stylesheet" href="/libs/source-code-pro/styles.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="/libs/jquery/2.1.3/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/libs/lightgallery/css/lightgallery.min.css">
    
    
        <link rel="stylesheet" href="/libs/justified-gallery/justifiedGallery.min.css">
    
    
    
    


</head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/" id="logo">
                <i class="logo"></i>
                <span class="site-title">LErry</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/.">主页</a>
                
                    <a class="main-nav-link" href="/freebooks">书籍</a>
                
                    <a class="main-nav-link" href="/tags">标签</a>
                
                    <a class="main-nav-link" href="/archives">归档</a>
                
                    <a class="main-nav-link" href="/aboutme">关于</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/css/images/avatar.png" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/.">主页</a></td>
                
                    <td><a class="main-nav-link" href="/freebooks">书籍</a></td>
                
                    <td><a class="main-nav-link" href="/tags">标签</a></td>
                
                    <td><a class="main-nav-link" href="/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/aboutme">关于</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/css/images/avatar.png" />
            <h2 id="name">LErry Li</h2>
            <h3 id="title">知我者谓我心忧，不知我者谓我何求</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Shanghai, China</span>
            <a id="follow" target="_blank" href="https://github.com/lerry903">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                65
                <span>文章</span>
            </div>
            <div class="article-info-block">
                54
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/lerry903" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="mailto:lerryli@foxmail.com" target="_blank" title="envelope" class=tooltip>
                            <i class="fa fa-envelope"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="http://wpa.qq.com/msgrd?v=3&uin=824444270&site=qq&menu=yes" target="_blank" title="qq" class=tooltip>
                            <i class="fa fa-qq"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="https://weibo.com/5941010376" target="_blank" title="weibo" class=tooltip>
                            <i class="fa fa-weibo"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/atom.xml" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-Ext JS 6学习文档-第3章-基础组件" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            Ext JS 6学习文档-第3章-基础组件
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/2018/04/20/Ext JS 6学习文档-第3章-基础组件/">
            <time datetime="2018-04-19T16:34:21.418Z" itemprop="datePublished">2018-04-20</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/categories/ExtJs/">ExtJs</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/ext/">ext</a>, <a class="tag-link" href="/tags/extjs/">extjs</a>, <a class="tag-link" href="/tags/java/">java</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>基础组件</p>
<p>在本章中，你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点：</p>
<ul>
<li>熟悉基本的组件 – 按钮，文本框，日期选择器等等 </li>
<li>表单字段的校验 </li>
<li>菜单和工具栏 </li>
<li>设计一个表单 </li>
<li>计算器程序– 本章的示例项目   </li>
</ul>
<p>本章的主要目的是创建一个表单设计和一个计算器示例项目。以下图分别展示了表单设计和计算器设计。</p>
<p>首先，你观察下列表单设计，你会发现我们使用了大量的控件，例如 label 和文本框。</p>
<p>以下图展示了表单的设计：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/124.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/124.jpg" alt="1">
</a></p>
<p>继续，设计计算器程序大量的使用了按钮控件。所以你首要学习的是按钮和 handler 。随后在本章最后我们将会构建一个<br>计算器程序。在这个过程中，你会知道如何使 view(视图) 和 controller(控制器)进行交互并协同工作。我们还将看到如何绑定 view<br>model(视图模型) 的属性到一个 view(视图) 的字段上。</p>
<p>下图为计算机的设计展示：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/125.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/125.jpg" alt="1">
</a></p>
<h2 id="熟悉基本组件"><a href="#熟悉基本组件" class="headerlink" title="熟悉基本组件"></a>熟悉基本组件</h2><p>Ext JS 有大量的优秀的控件，现在让我们开始认识这些基础的组件吧。</p>
<h2 id="Ext-Button"><a href="#Ext-Button" class="headerlink" title="Ext.Button"></a>Ext.Button</h2><p>这是一个很常用的控件；handler 是用于处理单击事件，如以下代码所示：</p>
<pre><code>Ext.create(&apos;Ext.Button&apos;, {   
    text: &apos;My Button&apos;,   
    renderTo: Ext.getBody(),   
    handler: function() {     
        alert(&apos;click&apos;);
    }
});
</code></pre><p>前面代码的输出：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/126.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/126.jpg" alt="1">
</a></p>
<p>我在第二章已经介绍过如何运行样例代码，但这里我还想再次重申这一点，此文档中的大部分样例代码都是可以直接运行的。你可以选择在你本地设备上或者在 Sencha<br>Fiddle 上执行这些示例代码。你可以访问  Sencha Fiddle  并将上面的代码键入到 launch 函数中，运行并查看结果。如果你访问了  <a href="https://fiddle.sencha.com/" target="_blank" rel="noopener"><br>https://fiddle.sencha.com </a> 将会看到下列代码：</p>
<pre><code>Ext.application({   
    name : &apos;Fiddle&apos;,   
    launch : function() {
        Ext.Msg.alert(&apos;Fiddle&apos;, &apos;Welcome to Sencha Fiddle!&apos;);
    }
}) ;
</code></pre><p>现在粘贴下列的创建按钮的样例代码，运行并查看结果：</p>
<pre><code>Ext.application({   
    name : &apos;Fiddle&apos;,   
    launch : function() {
        Ext.create(&apos;Ext.Button&apos;, {       
            text: &apos;My Button&apos;,       
            renderTo: Ext.getBody(),       
            handler: function() {         
                alert(&apos;click&apos;);
            }
        });
    }
});
</code></pre><ul>
<li>不是所有的代码都可以这样运行，此外并非所有的示例代码都会有视觉呈现。 </li>
</ul>
<p>你还可以使用  listeners  配置添加更多的事件处理器，如以下代码所示：</p>
<pre><code>Ext.create(&apos;Ext.Button&apos;, {   
    text: &apos;My Button&apos;,   
    renderTo: Ext.getBody(),   
    listeners: {     
        click: {       
            fn: function(){
                //Handle click event         
                alert(&apos;click&apos;);
            }
        },
        mouseout: {       
            fn: function(){
                //Handle double click event         
                alert(&apos;Mouse out&apos;);
             }
        }
    }
});
</code></pre><p>以上代码只是创建了一个简单的按钮，你还可以创建很多不同的按钮，有 link button(连接按钮)，menu button(菜单按钮)，toggle<br>button(开关按钮) 等等；</p>
<p>来创建一个链接按钮，设置  href  属性，如以下代码所示：</p>
<pre><code>Ext.create(&apos;Ext.Button&apos;, {   
    renderTo: Ext.getBody(),   
    text: &apos;Link Button&apos;,   
    href: &apos;http://www.sencha.com/&apos; 
});
</code></pre><p>上面创建的链接按钮输出如图。当点击它则打开链接：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/127.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/127.jpg" alt="1">
</a></p>
<p>通过设置  menu  属性，创建一个菜单按钮，如以下代码所示：</p>
<pre><code>Ext.create(&apos;Ext.Button&apos;, {   
    text: &apos;My Button&apos;,   
    renderTo: Ext.getBody(),   
    menu: [{     
        text: &apos;Item 1&apos;
    }, {     
        text: &apos;Item 2&apos;
    }, {     
        text: &apos;Item 3&apos;
    }]
});
</code></pre><p>输出如下，当点击时出现下拉菜单：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/128.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/128.jpg" alt="1">
</a></p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/129.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/129.jpg" alt="1">
</a></p>
<p>Ext.Button  还有许多属性，例如  bind  ，  cls  ，  disabled  ，  html  ，  tooltip  ，  tpl<br>等等，你可以根据自己需求使用。</p>
<h2 id="Ext-MessageBox"><a href="#Ext-MessageBox" class="headerlink" title="Ext.MessageBox"></a>Ext.MessageBox</h2><p>Ext.window.MessageBox  类提供了 message box 实现。  Ext. MessageBox  是一个单例对象。你可以使用<br>MessageBox  弹出一个警告，信息确认，提示输入等等。</p>
<p>下列代码将弹出一个简单的提示信息。这里解释一下  Ext.Msg  是  Ext. Messagebox  类的别名：</p>
<pre><code>Ext.Msg.alert(&apos;Info&apos;, &apos;Document saved!&apos;);
</code></pre><p>下列代码将弹出一个消息确认框，button 为选择的值，取 yes 或 no ：</p>
<pre><code>Ext.Msg.confirm(&apos;Confirm&apos;, &apos;Are you want to cancel the updates?&apos;, function(button){   
    if(&apos;yes&apos;==button) {

    }   else {

    }
});
</code></pre><p>你也可以自定义这个 message box 如下：</p>
<pre><code>Ext.MessageBox.show({   
    title:&apos;Save Changes?&apos;,   
    msg: &apos;Do you want to save the file?&apos;,   
    buttons: Ext.MessageBox.YESNO,   
    fn: function(button){     
        if(&apos;yes&apos;==button){

        }else if(&apos;no&apos;==button){

        }   
    },
    icon: Ext.MessageBox.QUESTION 
}) ;
</code></pre><p>上面代码输出如下：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/130.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/130.jpg" alt="1">
</a></p>
<p>表单和表单字段</p>
<p>现在我们看一下都有哪些表单相关的组件。</p>
<h2 id="Ext-form-Panel"><a href="#Ext-form-Panel" class="headerlink" title="Ext.form.Panel"></a>Ext.form.Panel</h2><p>这个 form panel (表单面板)继承自 panel  并添加了表单相关的功能，例如字段管理，校验，提交等等。form panel 的默认布局是<br>anchor layout ，但是如果需要你可以改变这个配置。</p>
<p>form panel 有一个很方便的配置为  fieldDefaults  ，它可以用于指定表单内所有字段的默认类型。</p>
<h2 id="fields-字段-表单域"><a href="#fields-字段-表单域" class="headerlink" title="fields (字段/表单域)"></a>fields (字段/表单域)</h2><p>Ext JS 提供了很多内置的表单字段。比较常用的一些字段：</p>
<pre><code>Ext.form.field.Checkbox

Ext.form.field.ComboBox

Ext.form.field.Date

Ext.form.field.File

Ext.form.field.Hidden

Ext.form.field.HtmlEditor

Ext.form.field.Number

Ext.form.field.Radio

Ext.form.field.Text

Ext.form.field.TextArea

Ext.form.field.Time
</code></pre><p>我们看一下其中的一些字段的应用。</p>
<h2 id="Ext-form-field-Text"><a href="#Ext-form-field-Text" class="headerlink" title="Ext.form.field.Text"></a>Ext.form.field.Text</h2><p>这是一个基本的文本框，它具有很多有用的属性和配置。其中有一个很有用的属性是  vtype  它是用于校验的。 例如以下代码，这个  vtype  属性为<br>email 用于验证输入内容是否是有效的电子邮箱：</p>
<pre><code>Ext.create(&apos;Ext.form.field.Text&apos;, {   
    renderTo: Ext.getBody(),   
    name: &apos;email&apos;,   
    fieldLabel: &apos;Email&apos;,   
    allowBlank: false,   
    vtype: &apos;email&apos; 
});
</code></pre><p>这里  allowBlank  也是一个校验属性。通过设置 allowBlank 属性为 false ，如果这个字段为空白，将会提示校验不通过。</p>
<h2 id="Ext-form-field-Number"><a href="#Ext-form-field-Number" class="headerlink" title="Ext.form.field.Number"></a>Ext.form.field.Number</h2><p>number 字段继承自 spinner 字段，spinner 字段则继承自 text 字段，进而的 number 等于是继承了两者。这个 number<br>字段提供了几个选项来处理数值。下列代码创建了一个数值文本框：</p>
<pre><code>Ext.create(&apos;Ext.form.field.Number&apos;, {   
    renderTo: Ext.getBody(),   
    name: &apos;Count&apos;,   
    fieldLabel: &apos;Count&apos;,
    value: 0,   
    maxValue: 10,   
    minValue: 0 
});
</code></pre><p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/131.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/131.jpg" alt="1">
</a></p>
<p>你可以移除下拉按钮，方向键，鼠标滚轮监听，用配置：  hideTrigger  ，  keyNavEnabled  ，和<br>mouseWheelEnabled  。</p>
<h2 id="Ext-form-field-ComboBox"><a href="#Ext-form-field-ComboBox" class="headerlink" title="Ext.form.field.ComboBox"></a>Ext.form.field.ComboBox</h2><p>下列代码创建了一个月份下拉菜单。这个  combobox  有一个配置为  store  。 这个  store  是数据源，为此下拉菜单提供数据。<br>store  是属于 ExtJS 中数据包部分， 在接下来的章节中我们会详细介绍的。</p>
<p>combobox  中另一个重要的配置是  queryMode  。这个属性取值可以是 ‘local’ 或者 ‘remote’。如果你设置为 remote<br>了，那么这个数据源 store 将在运行加载数据时发送请求从远程服务器获取数据：</p>
<pre><code>var months = Ext.create(&apos;Ext.data.Store&apos;, {
    fields: [&apos;abbr&apos;, &apos;name&apos;],
    data: [{&quot;abbr&quot;:&quot;JAN&quot;, &quot;name&quot;:&quot;January&quot;},
        {&quot;abbr&quot;:&quot;FEB&quot;, &quot;name&quot;:&quot;February&quot;},   
        {&quot;abbr&quot;:&quot;MAR&quot;, &quot;name&quot;:&quot;March&quot;},
        {&quot;abbr&quot;:&quot;APR&quot;, &quot;name&quot;:&quot;April&quot;},   
        {&quot;abbr&quot;:&quot;MAY&quot;, &quot;name&quot;:&quot;May&quot;},
        {&quot;abbr&quot;:&quot;JUN&quot;, &quot;name&quot;:&quot;June&quot;},   
        {&quot;abbr&quot;:&quot;JUL&quot;, &quot;name&quot;:&quot;July&quot;},
        {&quot;abbr&quot;:&quot;AUG&quot;, &quot;name&quot;:&quot;August&quot;},
        {&quot;abbr&quot;:&quot;SEP&quot;, &quot;name&quot;:&quot;September&quot;},   
        {&quot;abbr&quot;:&quot;OCT&quot;, &quot;name&quot;:&quot;October&quot;},
        {&quot;abbr&quot;:&quot;NOV&quot;, &quot;name&quot;:&quot;November&quot;},
        {&quot;abbr&quot;:&quot;DEC&quot;, &quot;name&quot;:&quot;December&quot;}] 
}) ;

Ext.create(&apos;Ext.form.ComboBox&apos;, {   
    fieldLabel: &apos;Choose Month&apos;,
    store: months,   
    queryMode: &apos;local&apos;,   
    displayField: &apos;name&apos;,
    valueField: &apos;abbr&apos;,   
    renderTo: Ext.getBody() 
});
</code></pre><p>以上代码的输出如下：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/132.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/132.jpg" alt="1">
</a></p>
<h2 id="Ext-form-field-HtmlEditor"><a href="#Ext-form-field-HtmlEditor" class="headerlink" title="Ext.form.field.HtmlEditor"></a>Ext.form.field.HtmlEditor</h2><p>Ext JS 也有一个非常优秀的 HTML 编辑器，它提供直接在 web 页面上处理文字的能力，如以下代码所示：</p>
<pre><code>Ext.create(&apos;Ext.form.HtmlEditor&apos;, {   
    width: 800,   
    height: 200,   
    renderTo: Ext.getBody() 
});
</code></pre><p>以上代码输出如下：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/133.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/133.jpg" alt="1">
</a></p>
<h2 id="表单字段的校验"><a href="#表单字段的校验" class="headerlink" title="表单字段的校验"></a>表单字段的校验</h2><p>大多数表单都有自己的校验规则，例如你键入了一个非数值的内容到 number 字段，它将显示一个验证无效的提示。再有这个 text 字段(文本框) 校验属性有<br>allowBlank  ，  minLength  ，和  maxLength  。 更进一步的，还有  regex  属性可以使用正则表达式自定义校验。</p>
<h2 id="form-panel-的事件"><a href="#form-panel-的事件" class="headerlink" title="form panel 的事件"></a>form panel 的事件</h2><p>form panel 支持的部分事件：</p>
<ul>
<li>beforeaction  : 任意动作执行前触发，例如 submit，load，doAction 这些动作执行时 </li>
<li>actionfailed  : 执行一个动作失败时触发 </li>
<li>actioncomplete  : 在一个动作执行完成之后触发This event will be fired after an action is completed </li>
<li>validitychange  : 表单键入的内容有效性发生变化时触发 </li>
<li>dirtychange  : 表单的dirty状态改变时触发 </li>
</ul>
<h2 id="表单字段容器"><a href="#表单字段容器" class="headerlink" title="表单字段容器"></a>表单字段容器</h2><p>以下是一些 from panel 里很有用的容器。</p>
<h2 id="Ext-form-CheckboxGroup"><a href="#Ext-form-CheckboxGroup" class="headerlink" title="Ext.form.CheckboxGroup"></a>Ext.form.CheckboxGroup</h2><p>CheckboxGroup  继承自  FieldContainer  用于组织复选框。下列示例中，复选框组的 items 中所有的项都有相同的 name<br>；这有助于将得到的值作为一个单一的参数传递给服务器。</p>
<pre><code>Ext.create(&apos;Ext.form.CheckboxGroup&apos;, {   
    renderTo: Ext.getBody(),   
    fieldLabel: &apos;Skills &apos;,   
    vertical: true,   
    columns: 1,   
    items: [{ boxLabel: &apos;C++&apos;, name: &apos;rb&apos;, inputValue: &apos;1&apos; },
        { boxLabel: &apos;.Net Framework&apos;, name: &apos;rb&apos;, inputValue: &apos;2&apos;, checked: true },
        { boxLabel: &apos;C#&apos;, name: &apos;rb&apos;, inputValue: &apos;3&apos; },
        { boxLabel: &apos;SQL Server&apos;, name: &apos;rb&apos;, inputValue: &apos;4&apos; }]
}) ;
</code></pre><p>以上代码输出如下：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/134.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/134.jpg" alt="1">
</a></p>
<h2 id="Ext-form-FieldContainer"><a href="#Ext-form-FieldContainer" class="headerlink" title="Ext.form.FieldContainer"></a>Ext.form.FieldContainer</h2><p>FieldContainer  是很有用的，当你想将一组相关字段附加到一个标签时。</p>
<p>以下代码的输出你会发现一个 label 后面绑定了两个文本框：</p>
<pre><code>Ext.create(&apos;Ext.form.FieldContainer&apos;, {
    renderTo: Ext.getBody(), 
    fieldLabel: &apos;Name&apos;,   
    layout: &apos;hbox&apos;,   
    combineErrors: true,   
    defaultType: &apos;textfield&apos;,
    defaults: {     
        hideLabel: &apos;true&apos;
    },   
    items: [{
        name: &apos;firstName&apos;,
        fieldLabel: &apos;First Name&apos;,
        flex: 2,     
        emptyText: &apos;First&apos;,     
        allowBlank: false
    }, {     
        name: &apos;lastName&apos;,     
        fieldLabel: &apos;Last Name&apos;,
        flex: 3,     
        margin: &apos;0 0 0 6&apos;,     
        emptyText: &apos;Last&apos;,     
        allowBlank: false
    }]
});
</code></pre><p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/1-5.png" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/1-5.png" alt="">
</a></p>
<h2 id="Ext-form-RadioGroup"><a href="#Ext-form-RadioGroup" class="headerlink" title="Ext.form.RadioGroup"></a>Ext.form.RadioGroup</h2><p>RadioGroup  继承自  CheckboxGroup  用于组织单选按钮。items 中的项都有相同的 name，另外这是单选的，如以下代码所示：</p>
<pre><code>Ext.create(&apos;Ext.form.RadioGroup&apos;, {   
    renderTo: Ext.getBody(),   
    fieldLabel: &apos;Sex &apos;,   
    vertical: true,   
    columns: 1,   
    items: [{ 
        boxLabel: &apos;Male&apos;, 
        name: &apos;rb&apos;, 
        inputValue: &apos;1&apos; 
    },{ 
        boxLabel: &apos;Female&apos;, 
        name: &apos;rb&apos;, 
        inputValue: &apos;2&apos; 
    }]
});
</code></pre><p>代码输出：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/136.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/136.jpg" alt="1">
</a></p>
<h2 id="提交表单"><a href="#提交表单" class="headerlink" title="提交表单"></a>提交表单</h2><p>使用 form 的 submit 方法提交表单。使用  getForm  方法获取表单并  isValid  方法进行提交前的表单内容校验。如以下代码所示：</p>
<pre><code>var form = this.up(&apos;form&apos;).getForm();
if (form.isValid()) {   
    form.submit({     
        url: &apos;someurl&apos;,     
        success: function () {

        },
        failure: function () {

        }
    });
} else {
    Ext.Msg.alert(&apos;Error&apos;, &apos;Fix the errors in the form&apos;)
}
</code></pre><h2 id="菜单和工具栏"><a href="#菜单和工具栏" class="headerlink" title="菜单和工具栏"></a>菜单和工具栏</h2><p>对于你能想到的任何的菜单和工具栏 Ext JS 提供了最完整的支持。  Ext.toolbar.Toolbar  用于构建一个工具栏。默认情况下任何子项在<br>Ext.toolbar.Toolbar  都是按钮，但是你可以添加任意控件进去，例如一个文本框，一个数值框，一个图标，一个下拉菜单等等。</p>
<p>规范整理你的工具栏中的项，你可以使用 空格(  Ext.toolbar.Spacer  )， 分隔符(  Ext.toolbar. Separator<br>)，和 使控件右对齐(  Ext.toolbar.Fill  ) 。这里也可以使用快捷方式  ‘ ‘ (空格)，’-‘ 和 ‘|’<br>(都是分隔符，只有很小的差别)，和 ‘  -&gt; ‘ (右对齐)。</p>
<p>Ext.menu.Menu  用于构建一个菜单，items 属性中为  Ext.menu.Item  一个个菜单项。</p>
<p>一个简单的代码示例和以下截图的输出：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/137.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/137.jpg" alt="1">
</a></p>
<p>Ext  .  create  (  ‘Ext.toolbar.Toolbar’  ,  {</p>
<p>renderTo  :  Ext  .  getBody  (  )  ,</p>
<p>width  :  800  ,  items  :  [  {</p>
<p>text  :  ‘My Button’</p>
<p>}  ,  {</p>
<p>text  :  ‘My Button’  ,</p>
<p>menu  :  [  {</p>
<p>text  :  ‘Item 1’</p>
<p>}  ,  {</p>
<p>text  :  ‘Item 2’</p>
<p>}  ,  {</p>
<p>text  :  ‘Item 3’</p>
<p>}  ]</p>
<p>}  ,  {</p>
<p>text  :  ‘Menu with divider’  ,</p>
<p>tooltip  :  {</p>
<p>text  :  ‘Tooltip info’  ,</p>
<p>title  :  ‘Tip Title’</p>
<p>}  ,</p>
<p>menu  :  {</p>
<p>items  :  [  {</p>
<p>text  :  ‘Task 1’  ,</p>
<p>// handler: onItemClick</p>
<p>}  ,  ‘-‘  ,  {</p>
<p>text  :  ‘Task 2’  ,</p>
<p>// handler: onItemClick</p>
<p>}  ,  {</p>
<p>text  :  ‘Task 3’  ,</p>
<p>// handler: onItemClick</p>
<p>}  ]</p>
<p>}</p>
<p>}  ,  ‘-&gt;’  ,  {</p>
<p>xtype  :  ‘textfield’  ,</p>
<p>name  :  ‘field1’  ,</p>
<p>emptyText  :  ‘search web site’</p>
<p>}  ,  ‘-‘  ,  ‘Some Info’  ,  {</p>
<p>xtype  :  ‘tbspacer’</p>
<p>}  ,  {</p>
<p>name  :  ‘Count’  ,</p>
<p>xtype  :  ‘numberfield’  ,</p>
<p>value  :  0  ,</p>
<p>maxValue  :  10  ,</p>
<p>minValue  :  0  ,</p>
<p>width  :  60</p>
<p>}  ]</p>
<p>}  )  ;</p>
<h2 id="设计一个-客户反馈-表单"><a href="#设计一个-客户反馈-表单" class="headerlink" title="设计一个(客户反馈)表单"></a>设计一个(客户反馈)表单</h2><p>现在根据之前所学，我们来设计一个表单。</p>
<p>我们将设计如图所示的表单：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/138.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/138.jpg" alt="1">
</a></p>
<p>以下是这个表单的代码。这里我维护着一个这个例子的完整的源码  <a href="https://github.com/ananddayalan/extjs-by-
example-customer-feedback-form" target="_blank" rel="noopener"> https://github.com/ananddayalan/extjs-by-<br>example-customer-feedback-form </a></p>
<p>这里我们所有的组件都在  Viewport  中。 这是一个专用的容器，它代表浏览器里应用的视图区域。</p>
<p>在  Viewport  中我们设置 scrollable 选项将子组件设为滚动的，使用 true 或 false 。也可以取值为 x 或 y<br>表示只允许水平或垂直滚动：</p>
<pre><code>Ext.create(&apos;Ext.container.Viewport&apos;, {
    scrollable: true,   
    items: [{     
        xtype: &apos;container&apos;,    
        layout: {   
            type: &apos;hbox&apos;,   
            align: &apos;center&apos;,   
            pack: &apos;center&apos;
        },     
        items: [ {       
            xtype: &apos;form&apos;,       
            bodyPadding: 20,       
            maxWidth: 700,       
            flex: 1,
            title: &apos;Custom Feedback&apos;,
            items:[{
                xtype: &apos;fieldcontainer&apos;,         
                layout: &apos;hbox&apos;,         
                fieldLabel: &apos;Name&apos;,         
                defaultType: &apos;textfield&apos;,
                defaults: {           
                    allowBlank: false,           
                    flex: 1
                },
                items: [{           
                    name: &apos;firstName&apos;,           
                    emptyText: &apos;First Name
                }, {          
                    name: &apos;lastName&apos;,           
                    margin: &apos;0 0 0 5&apos;,           
                    emptyText: &apos;Last Name&apos;
                }]
            },{         
                xtype: &apos;datefield&apos;,         
                fieldLabel: &apos;Date of Birth&apos;,
                name: &apos;dob&apos;,         
                maxValue: new Date() /* Prevent entering the future date.*/
            }, {
                fieldLabel: &apos;Email Address&apos;,         
                name: &apos;email&apos;, 
                vtype: &apos;email&apos;,
                allowBlank: false
            }, {
                fieldLabel: &apos;Phone Number&apos;,         
                labelWidth: 100,
                name: &apos;phone&apos;,
                width: 200, 
                emptyText: &apos;xxx-xxx-xxxx&apos;,
                maskRe: /[\d\-]/,         
                regex: /^\d{3}-\d{3}-\d{4}$/,
                regexText: &apos;The format must be xxx-xxx-xxxx&apos; 
            },{
                xtype: &apos;radiogroup&apos;,
                fieldLabel: &apos;How satisfied with our service?&apos;,
                vertical: true, 
                columns: 1,
                items: [ {           
                    boxLabel: &apos;Very satisfied&apos;,
                    name: &apos;rb&apos;,           
                    inputValue: &apos;1&apos;
                }, {
                    boxLabel: &apos;Satisfied&apos;,           
                    name: &apos;rb&apos;, inputValue: &apos;2&apos;
                }]       
            },{
                xtype: &apos;checkboxgroup&apos;,
                fieldLabel: &apos;Which of these words would you use to describe our products? Select all that apply&apos;,
                vertical: true,         
                columns: 1,         
                items: [{           
                    boxLabel: &apos;Reliable&apos;,          
                    name: &apos;ch&apos;,           
                    inputValue: &apos;1&apos;
                }]
            },{
                xtype: &apos;radiogroup&apos;,
                fieldLabel: &apos;How likely is it that you would recommend this company to a friend or colleague?&apos;,
                vertical: false,         
                defaults: { padding: 20 },
                items: [ {           
                    boxLabel: &apos;1&apos;,           
                    name: &apos;recommend&apos;,           
                    inputValue: &apos;1&apos;
                }],         
                buttons: [{
                    text: &apos;Submit&apos;,          
                    handler: function () {
                        var form = this.up(&apos;form&apos;).getForm();
                        if (form.isValid()) {               
                            form.submit({                 
                                url: &apos;cutomer/feedback&apos;,                 
                                success: function () {},                 
                                failure: function () {}
                            });
                        } else {
                            Ext.Msg.alert(&apos;Error&apos;, &apos;Fix the errors in the form&apos;)
                        }
                    }
                }]
            }]
        }]
    }]
});
</code></pre><p>在以上代码中通过在容器级设置  defaultType  属性，这样我们就可以不必在容器的每个子组件里重复的指定  xtype<br>属性了。这样默认情况下，所有子组件在没有显式指定  xtype  时默认的类型都是  textfield  。</p>
<p>form panel 上有一个 flex 配置用于填补父容器的宽度，同时通过设置 maxWidth 为 700 限制 form panel 的最大宽度。</p>
<p>字段容器使用 hbox 布局将 first name 和 last name 文本框放在一个 label 标签下。</p>
<h2 id="写一个计算器应用"><a href="#写一个计算器应用" class="headerlink" title="写一个计算器应用"></a>写一个计算器应用</h2><p>现在我们结合目前所学构建一个完整的小项目。这是我们将要构建的计算器的设计：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/125.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/125.jpg" alt="1">
</a></p>
<h2 id="文件夹结构"><a href="#文件夹结构" class="headerlink" title="文件夹结构"></a>文件夹结构</h2><p>这是我们创建的计算器工程的目录结构。这里我不是用 sencha Cmd 生成的项目，只是从 Ext JS 复制了一些必须的文件到项目文件夹中：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/139.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/139.jpg" alt="1">
</a></p>
<p>完整可用的项目在这里：  <a href="https://github.com/ananddayalan/extjs-by-example-calculator" target="_blank" rel="noopener"> https://github.com/ananddayalan/extjs-by-example-calculator
</a> .</p>
<h2 id="App-–-app-js"><a href="#App-–-app-js" class="headerlink" title="App – app.js"></a>App – app.js</h2><p>在  app.js  文件里我们简单的创建了  Main  视图，作为可移动窗体浮动在浏览器：</p>
<pre><code>Ext.application({   
    name: &apos;Calc&apos;,   
    launch: function () {
        Ext.create(&apos;Calc.view.main.Main&apos;).show();
    }
});
</code></pre><h2 id="再谈-MVC-和-MVVM"><a href="#再谈-MVC-和-MVVM" class="headerlink" title="再谈 MVC 和 MVVM"></a>再谈 MVC 和 MVVM</h2><p>第一章的时候，我们已经介绍过  MVC  (  Model View Controller  ) 和  MVVM  (  Model View<br>ViewModel  )。 这个示例项目的代码很好的展示了 视图，控制器，和视图模型之间的区别。</p>
<h2 id="Model-模型"><a href="#Model-模型" class="headerlink" title="Model (模型)"></a>Model (模型)</h2><p>这代表着数据层。model 保存的数据可以包含数据验证和逻辑。</p>
<h2 id="View-视图"><a href="#View-视图" class="headerlink" title="View (视图)"></a>View (视图)</h2><p>这一层是用户界面。包含有 button，form，和 message box 等等组件。在我们这次写的计算器应用中  main.js<br>就是一个很好的视图例子。</p>
<h2 id="Controller-控制器"><a href="#Controller-控制器" class="headerlink" title="Controller (控制器)"></a>Controller (控制器)</h2><p>控制器处理 view(视图)相关的逻辑，例如 view 的 event(事件)处理，还有任何程序相关逻辑都可以写在这里。</p>
<h2 id="ViewController-视图控制器-和-Controller-控制器"><a href="#ViewController-视图控制器-和-Controller-控制器" class="headerlink" title="ViewController (视图控制器) 和 Controller (控制器)"></a>ViewController (视图控制器) 和 Controller (控制器)</h2><p>在 Ext JS 5 和 6 中，有两种类型的控制器：  ViewController  和  Controller  。 这个<br>ViewController  自 Ext JS 5 开始引进的。  ViewController<br>是为一个指定的视图创建的控制器，但是这个控制器也可以交叉其他视图的逻辑。</p>
<p>ViewController  带来了一些新的概念，例如 引用和监听，简化视图与控制之间的关系。同时  View  销毁时  ViewController<br>也会被销毁，他们具有相同的生命周期，在这个例子中我们没有使用 引用和监听，但是在下一个例子中我们会使用的。</p>
<ul>
<li>你可以使用 listeners  代替 handler 处理事件 </li>
</ul>
<h2 id="View-model"><a href="#View-model" class="headerlink" title="View model"></a>View model</h2><p>view model 封装了 view(视图)所需要的展示逻辑，绑定数据到 view 并且每当数据改变时处理更新。</p>
<p>它有别于 model ，  view model  主要是为一个指定的视图而创建的。一个  model  是一个纯粹的数据类并可用于整个应用中，但一个<br>view model  是起到一个  view  和  model  之间的数据粘合剂的作用。看一下  main.js  的 视图模型绑定。</p>
<h2 id="视图-—-Main-js"><a href="#视图-—-Main-js" class="headerlink" title="视图 — Main.js"></a>视图 — Main.js</h2><p>这里我为这个计算器应用创建一个视图为  Main  。这个视图里包含所有的按钮，显示字段等等。相关的事件用 controller<br>的方法。这个视图的控制器已经使用 controller 配置指定了。</p>
<p>这个视图使用 table 布局，配置为 4 列。CSS 类使用  cls  属性指定。</p>
<p>代码里有附加的注释：</p>
<pre><code>Ext.define(&apos;Calc.view.main.Main&apos;, {   
    extend: &apos;Ext.window.Window&apos;,
    /* 表示在当前视图加载之前先加载这些所需的类*/
    requires: [ &apos;Calc.view.main.MainController&apos;,
                &apos;Calc.view.main.MainModel&apos;],   
    xtype: &apos;app-main&apos;,   
    controller: &apos;main&apos;,
    /* 视图的 view model (视图模型)*/   
    viewModel: { type: &apos;main&apos; },
    resizable: false,   
    layout: {     
        type: &apos;table&apos;,     
        columns: 4
    },  
    /* defaultType 和 defaults 属性是用于 items 内的子组件的，任何子组件都可以覆盖这些配置 */
    defaultType: &apos;button&apos;,   
    defaults: {     
        width: 50,
        height: 50,     
        cls: &apos;btn&apos;,     
        handler: &apos;onClickNumber&apos;
    },  
    /* 这里我用 Ext.window.Window 的 header 显示计算器的结果。使用 header 你可以在浏览器里移动这个计算器。*/
    header: {     
        items: [{            
            xtype: &apos;displayfield&apos;,       
            colspan: 4,       
             width: 200,      
            cls: &apos;display&apos;,       
             bind: { 
                 value: &apos;{display}&apos; 
             },
             height: 60,       
             padding: 0
        }]
    },
    items: [{     
        text: &apos;C&apos;,     
        colspan: 2,     
        width: 100,     
        cls: &apos;btn-green&apos;,     
        handler: &apos;onClickClear&apos;
    }, {     
        text: &apos;+/-&apos;,     
        cls: &apos;btn-green&apos;,     
        handler: &apos;onClickChangeSign&apos;
    }, {     
        text: &apos;÷&apos;,     
        cls: &apos;btn-orange&apos;,     
        handler: &apos;onClickOp&apos;
    },{ 
        text: &apos;7&apos; 
    },{ 
        text: &apos;8&apos; 
    },{ 
        text: &apos;9&apos; 
    },{ 
        text: &apos;×&apos;,     
        cls: &apos;btn-orange&apos;,     
        handler: &apos;onClickOp&apos;
    },{ 
        text: &apos;4&apos;
    },{ 
        text: &apos;5&apos;
    },{ 
        text: &apos;6&apos;
    },{ 
        text: &apos;-&apos;,     
        cls: &apos;btn-orange&apos;,     
        handler: &apos;onClickOp&apos;
    },{ 
        text: &apos;1&apos;
    },{ 
        text: &apos;2&apos;
    },{ 
        text: &apos;3&apos;
    },{ 
        text: &apos;+&apos;,     
        cls: &apos;btn-orange&apos;,     
        handler: &apos;onClickOp&apos;
    },{ 
        text: &apos;0&apos;,     
        width: 100,     
        colspan: 2
    },{ 
        text: &apos;.&apos;,     
        handler: &apos;onClickDot&apos;
    },{ 
        text: &apos;=&apos;,     
        cls: &apos;btn-orange&apos;,     
        handler: &apos;onClickOp&apos;
    }] 
});
</code></pre><h2 id="控制器-—-MainController-js"><a href="#控制器-—-MainController-js" class="headerlink" title="控制器 — MainController.js"></a>控制器 — MainController.js</h2><p>虽然这个控制器的代码有点长，这是一个非常简单的代码。控制器中有很多方法处理按钮的点击事件，例如运算符和操作数的点击处理。控制器使用了一个 model 为<br>Main  ：</p>
<pre><code>Ext.define(&apos;Calc.view.main.MainController&apos;, {
    extend: &apos;Ext.app.ViewController&apos;,
    alias: &apos;controller.main&apos;,   
    views: [&apos;Calc.view.main.Main&apos;],
    models: [&apos;Main&apos;],
    //这个 state 是一个自定义属性，用来跟踪计算器的状态。
        state: {
            operatorClicked: false,     
            selectedOperator: null,     
            dotClicked: false,
            op1: 0,     
            numberClicked: false,     
            sign: true,     
            decimal: false
        },
    onClickClear: function () {
        var vm = this.getViewModel();     
        vm.set(&apos;display&apos;,&apos;0&apos;);     
        this.state.selectedOperator=null;
        this.state.op1=0;     
        this.state.isPositive = true;     
        this.state.decimal = false;     
        this.state.sign = true;
    },
    onClickChangeSign: function (btn) {
        var vm = this.getViewModel();     
        var cur = vm.get(&apos;display&apos;);     
        if(cur!=&apos;0&apos;) {       
            if(this.state.sign===true ) {         
                vm.set(&apos;display&apos;, &apos;-&apos; + cur);
            }else {
                vm.set(&apos;display&apos;, cur.toString().substring(1));
            }
       }
       this.state.sign=!this.state.sign;
    },
    onClickOp: function (btn) {
        if(this.state.selectedOperator!=null &amp;&amp; this.state.numberClicked===true){
            var vm = this.getViewModel();       
            var op2 = parseFloat(vm.get(&apos;display&apos;));       
            var op1 = parseFloat(this.state.op1);
            var result = 0;
            switch(this.state.selectedOperator){         
                case &apos;+&apos;:         
                    result = op1 + op2;         
                    break;                 
                case &apos;-&apos;:         
                    result = op1 - op2;
                    break;                 
                case &apos;×&apos;:         
                    result = op1 * op2;         
                    break;                 
                case &apos;÷&apos;:         
                    result = op1 / op2;         
                    break;
            }
            vm.set(&apos;display&apos;, Math.round(result * 100) / 100);
            this.state.selectedOperator=null;
        }     
        if(btn.text!=&apos;=&apos;) {
            this.state.operatorClicked = true;
        }
        this.state.selectedOperator = btn.text;     
        this.state.numberClicked = false;
    },
    onClickDot: function (btn) {     
        if(this.state.decimal===false) {       
            var vm = this.getViewModel();       
            vm.set(&apos;display&apos;, vm.get(&apos;display&apos;) + &apos;.&apos;);
        }
    },
    onClickNumber: function (btn) {
        this.state.numberClicked = true;     
        if(this.state.selectedOperator ===&apos;=&apos;){
            this.onClickClear();
        }
        var vm = this.getViewModel();     
        if(this.state.operatorClicked===true) {       
            this.state.op1= vm.get(&apos;display&apos;);       
            vm.set(&apos;display&apos;, btn.text);       
            this.state.operatorClicked=false;
        }else{
            var cur = vm.get(&apos;display&apos;);       
            if(cur == &apos;0&apos;) {         
                cur = &apos;&apos;;
            }
            vm.set(&apos;display&apos;, cur + btn.text);
        }   
    } 
});
</code></pre><h2 id="视图模型-—-MainViewModel-js"><a href="#视图模型-—-MainViewModel-js" class="headerlink" title="视图模型 — MainViewModel.js"></a>视图模型 — MainViewModel.js</h2><p>这个  ViewModel  只有一个属性为  display<br>。这个用来绑定到计算器显示的值上。这里我们不会分别用一组字段创建模型，此外我们还将会硬编码数据。</p>
<pre><code>Ext.define(&apos;Calc.view.main.MainModel&apos;, {   
    extend: &apos;Ext.app.ViewModel&apos;,   
    alias: &apos;viewmodel.main&apos;,   
    data: {     
        display: 0.0
    }
});
</code></pre><p>在即将到来的章节中你将学习更多关于 模型，视图模型，字段，字段类型，校验 等等。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>在本章中，你了解了不同的基本组件，例如 文本框，数字框，按钮，菜单等等。你已经学会如何使用表单字段设计一个表单和我们之前创建了一个简单的计算器项目。</p>
<p>在下一章中，你将学习关于数据包的内容，例如 数据源 ，模型 ，代理等等。store ，model ，这将是有益于处理数据的。</p>
<p><img src="https://img-blog.csdn.net/20170611153659679?watermark/2/text/aHR0cDovL2Jsb
2cuY3Nkbi5uZXQvbHN5MDkwMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/disso
lve/70/gravity/SouthEast" alt=""></p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">


    <div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">分享到：</a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
</div>
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{"bdSize":16}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
<style>
    .bdshare_popup_box {
        border-radius: 4px;
        border: #e1e1e1 solid 1px;
    }
    .bdshare-button-style0-16 a,
    .bdshare-button-style0-16 .bds_more {
        padding-left: 20px;
        margin: 6px 10px 6px 0;
    }
    .bdshare_dialog_list a,
    .bdshare_popup_list a,
    .bdshare_popup_bottom a {
        font-family: 'Microsoft Yahei';
    }
    .bdshare_popup_top {
        display: none;
    }
    .bdshare_popup_bottom {
        height: auto;
        padding: 5px;
    }
</style>


</div>

            
    
        <a href="https://www.itchina.top/2018/04/20/Ext JS 6学习文档-第3章-基础组件/#comments" id="sourceId::2018/04/20/Ext JS 6学习文档-第3章-基础组件/" class="article-comment-link cy_cmt_count">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/2018/04/20/Git命令“从入门到放弃”/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    Git命令“从入门到放弃”
                
            </div>
        </a>
    
    
        <a href="/2018/04/20/Ext JS 6学习文档–第2章–核心概念/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">Ext JS 6学习文档–第2章–核心概念</div>
        </a>
    
</nav>


    
</article>


    
    
        <section id="comments">
    <div id="SOHUCS" sid="2018/04/20/Ext JS 6学习文档-第3章-基础组件/"></div>
</section>
    

</section>
            
                
<aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="no-thumbnail">
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/IDE/">IDE</a></p>
                            <p class="item-title"><a href="/2018/04/20/项目相关的CVS操作/" class="title">项目相关的CVS操作</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.467Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/J2EE/">J2EE</a></p>
                            <p class="item-title"><a href="/2018/04/20/图片转换PDF文件/" class="title">图片转换PDF文件</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.449Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/Spring/">Spring</a></p>
                            <p class="item-title"><a href="/2018/04/20/使用 Spring Data JPA 简化 JPA 开发/" class="title">使用 Spring Data JPA 简化 JPA 开发</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.448Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2018/04/20/通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法/" class="title">通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.448Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2018/04/20/面试感悟----一名3年工作经验的程序员应该具备的技能/" class="title">面试感悟----一名3年工作经验的程序员应该具备的技能</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.447Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ActiveMQ/">ActiveMQ</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/ExtJs/">ExtJs</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/J2EE/">J2EE</a><span class="category-list-count">7</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/J2EE/Spring/">Spring</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Redis/">Redis</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Spring/">Spring</a><span class="category-list-count">21</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/cnn图片数据处理、显示/">cnn图片数据处理、显示</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/cnn图片数据处理、显示/python数据分析/">python数据分析</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/web前端/">web前端</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库/">数据库</a><span class="category-list-count">3</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/数据库/集群/">集群</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/集群/">集群</a><span class="category-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/04/">四月 2018</a><span class="archive-list-count">65</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Apache/">Apache</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Docker/">Docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Druid/">Druid</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ImageToPDF/">ImageToPDF</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Logstash/">Logstash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Spring-Boot/">Spring Boot</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/activemq/">activemq</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ajax/">ajax</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/angular/">angular</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/cas/">cas</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/">docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/exception/">exception</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ext/">ext</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/extjs/">extjs</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/find/">find</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/github/">github</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ide/">ide</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/idea/">idea</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jboss/">jboss</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jmx/">jmx</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jpa/">jpa</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/linux/">linux</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/lombok/">lombok</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mvc/">mvc</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mybatis/">mybatis</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mysql/">mysql</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nginx/">nginx</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/numpy/">numpy</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seo/">seo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/server/">server</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/shiro/">shiro</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring/">spring</a><span class="tag-list-count">17</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring-mvc/">spring mvc</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring-boo/">spring-boo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/sql-server/">sql server</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/windows/">windows</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/zookeeper/">zookeeper</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/优化/">优化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分布式日志/">分布式日志</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/多线程/">多线程</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/工作/">工作</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/异常/">异常</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/异常处理/">异常处理</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/搜索引擎/">搜索引擎</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据分析/">数据分析</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/汉字转拼音/">汉字转拼音</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/版本控制系统/">版本控制系统</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/程序员/">程序员</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/经验/">经验</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/集群/">集群</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面试/">面试</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/tags/Apache/" style="font-size: 10px;">Apache</a> <a href="/tags/Docker/" style="font-size: 10px;">Docker</a> <a href="/tags/Druid/" style="font-size: 10px;">Druid</a> <a href="/tags/ImageToPDF/" style="font-size: 10px;">ImageToPDF</a> <a href="/tags/Logstash/" style="font-size: 10px;">Logstash</a> <a href="/tags/Spring-Boot/" style="font-size: 10px;">Spring Boot</a> <a href="/tags/activemq/" style="font-size: 18px;">activemq</a> <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/angular/" style="font-size: 10px;">angular</a> <a href="/tags/cas/" style="font-size: 10px;">cas</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/exception/" style="font-size: 10px;">exception</a> <a href="/tags/ext/" style="font-size: 14px;">ext</a> <a href="/tags/extjs/" style="font-size: 14px;">extjs</a> <a href="/tags/find/" style="font-size: 10px;">find</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/ide/" style="font-size: 12px;">ide</a> <a href="/tags/idea/" style="font-size: 10px;">idea</a> <a href="/tags/java/" style="font-size: 16px;">java</a> <a href="/tags/javascript/" style="font-size: 12px;">javascript</a> <a href="/tags/jboss/" style="font-size: 10px;">jboss</a> <a href="/tags/jmx/" style="font-size: 10px;">jmx</a> <a href="/tags/jpa/" style="font-size: 10px;">jpa</a> <a href="/tags/linux/" style="font-size: 14px;">linux</a> <a href="/tags/lombok/" style="font-size: 10px;">lombok</a> <a href="/tags/mvc/" style="font-size: 10px;">mvc</a> <a href="/tags/mybatis/" style="font-size: 10px;">mybatis</a> <a href="/tags/mysql/" style="font-size: 12px;">mysql</a> <a href="/tags/nginx/" style="font-size: 10px;">nginx</a> <a href="/tags/numpy/" style="font-size: 10px;">numpy</a> <a href="/tags/seo/" style="font-size: 10px;">seo</a> <a href="/tags/server/" style="font-size: 10px;">server</a> <a href="/tags/shiro/" style="font-size: 12px;">shiro</a> <a href="/tags/spring/" style="font-size: 20px;">spring</a> <a href="/tags/spring-mvc/" style="font-size: 10px;">spring mvc</a> <a href="/tags/spring-boo/" style="font-size: 10px;">spring-boo</a> <a href="/tags/sql-server/" style="font-size: 10px;">sql server</a> <a href="/tags/windows/" style="font-size: 10px;">windows</a> <a href="/tags/zookeeper/" style="font-size: 10px;">zookeeper</a> <a href="/tags/优化/" style="font-size: 12px;">优化</a> <a href="/tags/分布式日志/" style="font-size: 10px;">分布式日志</a> <a href="/tags/多线程/" style="font-size: 10px;">多线程</a> <a href="/tags/工作/" style="font-size: 10px;">工作</a> <a href="/tags/异常/" style="font-size: 10px;">异常</a> <a href="/tags/异常处理/" style="font-size: 10px;">异常处理</a> <a href="/tags/搜索引擎/" style="font-size: 12px;">搜索引擎</a> <a href="/tags/数据分析/" style="font-size: 10px;">数据分析</a> <a href="/tags/汉字转拼音/" style="font-size: 10px;">汉字转拼音</a> <a href="/tags/版本控制系统/" style="font-size: 10px;">版本控制系统</a> <a href="/tags/程序员/" style="font-size: 10px;">程序员</a> <a href="/tags/经验/" style="font-size: 10px;">经验</a> <a href="/tags/集群/" style="font-size: 10px;">集群</a> <a href="/tags/面试/" style="font-size: 10px;">面试</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://www.baidu.com">百度</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>

            
        </div>
        <!--google 底部广告 -->
<div style="width:100%;text-align: center;clear: both;margin-bottom: 20px;" class="hidden-xs">
    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- 博客footer上方的广告 -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-8254913025324557"
         data-ad-slot="3369473724"
         data-ad-format="auto"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
<footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy;2018 - 2018&nbsp; LErry Li &nbsp;版权所有<br>
			<a href="http://www.miitbeian.gov.cn">沪ICP备17054498号-3</a>
        </div>
    </div>
</footer>
        
    
    <script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId=cytxPSIHr"></script>
    <script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
    <script type="text/javascript">
    window.changyan.api.config({
    appid: 'cytxPSIHr',
    conf: 'prod_3c92d05d8ba4377e48c5fe27c2159761'
    });
    </script>




    
        <script src="/libs/lightgallery/js/lightgallery.min.js"></script>
        <script src="/libs/lightgallery/js/lg-thumbnail.min.js"></script>
        <script src="/libs/lightgallery/js/lg-pager.min.js"></script>
        <script src="/libs/lightgallery/js/lg-autoplay.min.js"></script>
        <script src="/libs/lightgallery/js/lg-fullscreen.min.js"></script>
        <script src="/libs/lightgallery/js/lg-zoom.min.js"></script>
        <script src="/libs/lightgallery/js/lg-hash.min.js"></script>
        <script src="/libs/lightgallery/js/lg-share.min.js"></script>
        <script src="/libs/lightgallery/js/lg-video.min.js"></script>
    
    
        <script src="/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
    
    



<!-- Custom Scripts -->
<script src="/js/main.js"></script>

    </div>
</body>
</html>